import React, { Component } from 'react'
import Bubbles from './bubble/Bubbles.js';
import OutputTable from '../tables/components/OutputTable.js';
import BackgroundImg1 from '../static/container4_bg1.png';
import BackgroundImg2 from '../static/container4_bg2.png';
import { pxToRem, pxToPx,pxToVh } from '../utils/adaptive.js';

export default class TableAndBubble extends Component {
    static defaultProps = {
        label: '累计利润贡献',
        value: '2018/09/10',
        title: '大连大学附属新华医院',
        showTitle: false,
        scale: 0.8,//缩放大小
        type: 1,
    }
    constructor(props) {
        super(props);
        this.state = {
            bubblesData:{},
        };
        //页面单位
        this.unit = window.om.unit;
        this.viewWidth = window.om.viewWidth;
        this.viewHeight = window.om.viewHeight;

        this.config = {
            item1: {
                containerWidth: this.transformUnit("21.3vw"),
                containerHeight: this.transformUnit("35.6vh"),
                mainWidth: this.transformUnit('21.3vw'),
                mainHeight: this.transformUnit('32.8vh'),
                tableHeight: this.transformUnit('14.6vh'),
                bubbleHeight: this.transformUnit('18.2vh'),
            },
            item2: {
                containerWidth: this.transformUnit("21.3vw"),
                containerHeight: this.transformUnit("52.7vh"),
                mainWidth: this.transformUnit('21.3vw'),
                mainHeight: this.transformUnit('49.9vh'),
                tableHeight: this.transformUnit('28.9vh'),
                bubbleHeight: this.transformUnit('21vh'),
            },
        }
        this.currentConfig = this.config["item" + this.props.type];
    }

    refreshBubble(data) {
        if (this.refs.otable) {
            this.setState({ bubblesData: data})
        }
    }
    refreshTable() {
        if (this.refs.otable) {
            this.refs.otable.setActive();
        }
    }

    transformUnit(data) {
        if (this.unit == "px") {//固定大小的设计
            if (data.indexOf("vh") != -1) {
                return parseFloat(data) * this.viewHeight + "px";
            } else if (data.indexOf("vw") != -1) {
                return parseFloat(data) * this.viewWidth + "px";
            } else {
                return data;
            }
        } else {//自适应的设计
            return data;
        }
    }

    geta(element, x, y, scale) {
        return (<div style={{ position: "absolute", left: x, top: y }}>{element}</div>)
    }

    getItemTitleStyle() {
        return {
            position: 'relative',
            fontSize: pxToRem(13.33),
            lineHeight: this.transformUnit("1.8vh"),
            fontFamily: 'PingFangSC-Semibold',
            color: '#ADF6FF',

        }
    }

    getContainerStyle() {
        return {
            position: 'relative',
            width: this.currentConfig.containerWidth,
            height: this.currentConfig.containerHeight,
        }
    }
    getMainStyle() {
        return {
            position: 'absolute',
            width: this.currentConfig.mainWidth,
            height: this.currentConfig.mainHeight,
            background: `url(${this.props.type == 1 ? BackgroundImg1 : BackgroundImg2}) no-repeat`,
            backgroundSize: "100% 100%",
        }
    }

    render() {
        let tableData = this.props.data;
        return (
            <div style={this.getContainerStyle()}>
                <div style={this.getItemTitleStyle()}>{this.props.title}</div>
                <div style={this.getMainStyle()}>
                    <div style={{ height: this.currentConfig.tableHeight }}>
                        <OutputTable ref="otable" data={tableData} refreshBubble={this.refreshBubble.bind(this)}/>
                    </div>
                    <div style={{ height: this.currentConfig.bubbleHeight, position: "relative", overflow: "hidden", }}>
                        <Bubbles random={this.state.random} type={this.props.type} data={this.state.bubblesData} refreshTable={this.refreshTable.bind(this)} />
                    </div>
                </div>
            </div>
        )
    }
}